<template>
  <div id="container">
  <div class="input-card" style="width: auto;">
  </div>
  </div>
</template>

<script>
import { getdata, getlnandla } from '@/api/eventlist'
export default {
  data () {
    return {
      heatmapData3: [],
      lng: '',
      lat: ''
    }
  },
  methods: {
    getlnandla1 () {
      getlnandla().then(res => {
        if (res.data.errcode === 0) {
          let obj = res.data.data.csc_mapjson
          let arr = []
          arr = obj.split(',')
          this.lng = arr[0]
          this.lat = arr[1]
        } else {
          this.$Notice.error({
            title: '查询失败！',
            desc: res.data.errmsg
          })
        }
      })
    },
    getcscdata () {
      getdata().then(res => {
        if (res.data.errcode === 0) {
          res.data.data.forEach(item => {
            let csclist = {
              lng: '',
              lat: '',
              count: ''
            }
            let json = item.csc_mapjson
            let arr = []
            arr = json.split(',')
            csclist.lng = parseFloat(arr[0])
            csclist.lat = parseFloat(arr[1])
            csclist.count = item.peopleNum
            this.heatmapData3.push(csclist)
          })
        } else {
          this.$Notice.error({
            title: '查询失败！',
            desc: res.data.errmsg
          })
        }
      })
    },
    initlngandlat () {
      let map = new AMap.Map('container', {
        resizeEnable: true,
        center: [this.lng, this.lat],
        /* center: [116.418261, 39.921984], */
        zoom: 12
      })
      if (!isSupportCanvas()) {
        alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
      }
      let heatmap
      let points = this.heatmapData3
      /**
       * http://gaode.com)
       */
      map.plugin(['AMap.Heatmap'], function () {
        // 初始化heatmap对象
        heatmap = new AMap.Heatmap(map, {
          radius: 35, // 给定半径
          opacity: [0.5, 0.7],
          gradient: {
            0.1: 'blue',
            0.3: 'rgb(117,211,248)',
            0.5: 'rgb(0, 255, 0)',
            0.7: '#ffea00',
            1.0: 'red'
          }
        })
        // 设置数据集
        heatmap.setDataSet({
          data: points,
          /* max: 50 */
          max: 10 // ceshi
        })
        console.log(points)
      })
      // 判断浏览区是否支持canvas
      function isSupportCanvas () {
        var elem = document.createElement('canvas')
        return !!(elem.getContext && elem.getContext('2d'))
      }
    }

  },
  mounted () {
    this.getlnandla1()
    let that = this
    setTimeout(function () {
      that.getcscdata()
    }, 1000)
    setTimeout(function () {
      that.initlngandlat()
    }, 2000)
  }
}
</script>
<style>
#container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>
